<div id="app">{{title}}</div>

<script>
  // 填充代码
  // 1. 基本结构
  const Vue = {
    createApp(options) {
      // 返回app对象
      return {
        mount(selector) {
          // 1. 找到宿主元素
          const parent = document.querySelector(selector)
          // 2. 渲染页面
          if (!options.render) {
            // 2.1 处理template： 编译
            options.render = this.compile(parent.innerHTML)
          }
          // 2.2 用户直接编写render
          // 执行render函数（这里指定render函数中的this的上下文，是配置项中data函数的返回值）
          const el = options.render.call(options.data())

          // 3. 追加到宿主
          parent.innerHTML = ''
          parent.appendChild(el)
        },
        compile(template) {
          // 返回一个render函数
          // parse -> ast
          // generate: ast -> render
          return function render() {
            const h3 = document.createElement('h3')
            h3.textContent = this.title
            return h3
          }
        }
      }
    }
  }
</script>

<script>
  const app = Vue.createApp({
    data() {
      return {
        title: 'hello, vue3 YK菌'
      }
    }
  })
  app.mount('#app')
</script>



